import { useMemo } from 'react';
import { EdgeProps, BaseEdge, getBezierPath } from 'reactflow';

function FlowEdge({
  id,
  source,
  target,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
}: EdgeProps) {
  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
  });

  const edgeStyles = useMemo(
    () => ({
      ...style,
      stroke: '#b1b1b7',
      strokeWidth: 2,
    }),
    [style],
  );

  return <BaseEdge path={edgePath} markerEnd={markerEnd} style={edgeStyles} />;
}

export default FlowEdge;
